<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2023-10-29 20:56:13
 * @LastEditors: ada.wu
 * @LastEditTime: 2023-11-26 20:15:50
-->
<template>
  <div>
    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
        height="calc(100vh - 240px)">
        <el-table-column label="序号" type="index" align="center" :width="65"></el-table-column>
        <el-table-column label="主叫教室" prop="col1" align="center">
          <template #default="scope">{{ scope.row.col1 }}</template>
        </el-table-column>
        <el-table-column label="被叫教室" prop="col2" align="center">
          <template #default="scope">{{ scope.row.col2 }}</template>
        </el-table-column>
        <el-table-column label="通话状态" prop="col3" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.col3 == 0 ? 'success' : 'danger'">{{
                scope.row.col3 == 0 ? "正常" : "主叫取消来电"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" prop="col4" align="center">
          <template #default="scope">{{ scope.row.col4 }}</template>
        </el-table-column>
        <el-table-column label="通话时常" prop="col5" align="center">

        </el-table-column>
        <el-table-column label="操作" prop="col6" align="center">
          <el-button type="text" disabled>播放</el-button>
          <el-button type="text" disabled>下载</el-button>
          <el-button type="text" disabled>记录</el-button>
        </el-table-column>
      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />
    </div>
  </div>
</template>
<script setup>
/**
 * 刷卡日志
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import Pagination from '@/components/pagination/index.vue';
import { resetForm } from '@/utils/EsDate.js';

//组件

// ======================================================
//                      变量声明
// ======================================================
const loading = ref(false);
// 表格数据
const dataOfTable = ref([{
  col1:"201",
  col2:"204",
  col3:2,
  col4:"2024-02-15 15:15:15",
  col5:"30分01秒",
  col6:"",
},{
  col1:"211",
  col2:"209",
  col3:0,
  col4:"2023-04-15 15:15:15",
  col5:"1分30秒",
  col6:"",
}]);
// 表格查询参数
const queryParam = ref({
  sort: "id",
  order: "desc",
  limit: 10,
  page: 1,
})
// 组件引用
const paginationRef = ref(null);
// ======================================================
//                      处理事件
// ======================================================
// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}
// ======================================================
//                      处理事件
// ======================================================
const loadData = () => {
  // let _queryParam = queryParam.value
  // _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  // loading.value = true
  // EsAjax.post(ApiUrls.logCard, { ..._queryParam }).then(res => {
  //   if (res.data.code != 200) {
  //     ElMessage.warning(res.data.data + res.data.msg);
  //     return;
  //   }
  //   let { list, totalCount } = res.data.data
  //   dataOfTable.value = list;
  //   paginationRef.value?.changeTotal({ totalCount: totalCount })
  // }).catch(err => {
  //   ElMessage.error(err.message);
  // }).finally(() => {
  //   loading.value = false
  // })
}


onMounted(() => {
  loadData();
})

</script>
